import $ from "jquery";
import { TreeNode } from "butterfly-dag";
import mock from "./Dag.vue";
import "./node.scss";

class BaseNode extends TreeNode {
  draw = (opts) => {
    this.options = opts;
    let container = $('<div class="iot-node"></div>')
      .css("top", opts.top + "px")
      .css("left", opts.left + "px")
      .attr("id", opts.id);
    let titleDom = $(
      `<div class="title"><i class="iconfont"></i>${opts.options.title}<div>`
    );
    container.append(titleDom);
    this.rightClick(titleDom);
    let stateTxt = {
      "-1": "未提交",
      0: "提交成功",
      1: "正在运行",
      2: "准备暂停",
      3: "暂停",
      4: "准备停止",
      5: "停止",
      6: "运行失败",
      7: "运行成功",
      8: "未知错误",
      9: "忽略",
      10: "被杀死",
      11: "准备运行",
      20: "前置失败",
    };
    let stateContainer = null;
    if (
      opts.options.title == "开始" ||
      opts.options.content == "00" ||
      JSON.stringify(opts.options.content) === "{}" ||
      opts.options.content == null
    ) {
      stateContainer = $(
        // `<div class="content"><div class="statestyle">${opts.options.title}</div></div>`
        `<div class="content"><div class="statestyle" style="height:6px"></div></div>`
      );
      container.append(stateContainer);
    } else if (
      opts.options.content &&
      opts.options.content !== "00" &&
      Object.keys(opts.options.content).length !== 0
    ) {
      //创建标签 stateContainer div
      stateContainer = $(`<div class="content"></div>`);
      //将opts.options.state 赋值给stateObj
      let stateObj = opts.options.content;
      //循环遍历state 创建 item状态名称+数量
      for (let i in stateObj) {
        let item = $(
          `<div class="statestyle">${stateTxt[i]}(${stateObj[i]})</div>`
        );
        item.addClass(`class${i}`);
        //点击item 状态名及数量 触发事件 state 弹出表格
        this.stateClick(item, "state", i);
        //stateContainer 添加 item
        stateContainer.append(item);
      }
      //logoContainer 添加节点stateContainer
      container.append(stateContainer);
    }
    // container.append(contentDom);
    this.showExpandBtn(container);
    this.onTitlClick(titleDom, opts);
    return container[0];
  };
  //标题的点击
  onTitlClick(dom, opts) {
    dom.on("click", (e) => {
      if (opts.options.content !== "00") {
        mock.methods.titleClick(
          opts.options.content,
          opts.id,
          opts,
          "title",
          opts.options.content
        );
      }
    });
  } //状态的点击
  stateClick(dom, type, itemstate) {
    dom.on("click", (e) => {
      mock.methods.stateClick(this.options.options, itemstate);
    });
  }
  //节点下面的折叠和删除
  showExpandBtn(container = this.dom) {
    let expandBtn = $(`<div class='expand-btn'>···</div>`);
    let removeBtn = $(`<div class='remove-btn el-icon-delete'></div>`);
    expandBtn.on("click", (e) => {
      e.stopPropagation();
      e.preventDefault();
      if (this.collapsed) {
        // 可以在这里向后端请求数据,把node穿进去expand里面
        this.expand();
      } else {
        this.collapse();
      }
    });
    removeBtn.on("click", (e) => {
      mock.methods.remove(this.options.id);
    });

    if (
      this.options.options.title !== "开始" &&
      this.options.options.content !== "00" &&
      JSON.stringify(this.options.options.content) !== "{}" &&
      this.options.options.children &&
      this.options.options.children.length > 0
    ) {
      removeBtn.appendTo(container);
      expandBtn.appendTo(container);
    }
  }
  rightClick(dom) {
    dom.on("mousedown", (e) => {
      e.preventDefault();
      if (
        e.which == 3 &&
        this.options.options.title !== "开始" &&
        this.options.options.title !== "其他" &&
        this.options.options.content !== "00" &&
        this.options.options.istwo == true
      ) {
        mock.methods.rightClick(e, this.options, true);
      } else {
        mock.methods.rightClick(e, this.options, false);
      }
    });
    document.oncontextmenu = function (e) {
      e.preventDefault();
      document.addEventListener("click", function (event) {
        mock.methods.rightClick(e, this.options, false);
      });
      // };
    };
  }
}

export default BaseNode;
